<template>
  <div>
    <div style="margin-bottom: 20px;">原料管理/采购管理/采购入库管理/查看</div>
    <!-- 采购信息 -->
    <el-card style="margin-bottom: 20px;">
      <div style="font-size: 18px; margin-bottom: 10px;">采购信息</div>
      <el-row>
        <el-col :span="12">
          <div>采购编号：{{ detail.purchaseNo }}</div>
          <div>采购原料编号：{{ detail.materialNo }}</div>
          <div>采购日期：{{ detail.purchaseDate }}</div>
        </el-col>
        <el-col :span="12">
          <div>采购原料名称：{{ detail.materialName }}</div>
          <div>采购原料数量：{{ detail.materialQty }}</div>
          <div>采购批次号：{{ detail.batchNo }}</div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 质检信息 -->
    <el-card style="margin-bottom: 20px;">
      <div style="font-size: 18px; margin-bottom: 10px;">质检信息</div>
      <el-row>
        <el-col :span="12">
          <div>质检编号：{{ detail.qcNo }}</div>
          <div>质检人：{{ detail.qcPerson }}</div>
          <div>合格数量：{{ detail.qcQty }}</div>
        </el-col>
        <el-col :span="12">
          <div>质检名称：{{ detail.qcName }}</div>
          <div>质检时间：{{ detail.qcTime }}</div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 仓库信息 -->
    <el-card>
      <div style="font-size: 18px; margin-bottom: 10px;">仓库信息</div>
      <el-row>
        <el-col :span="12">
          <div>仓库编号：{{ detail.warehouseNo }}</div>
          <div>现在库存数量：{{ detail.currentQty }}</div>
          <div>库区名称：{{ detail.areaName }}</div>
        </el-col>
        <el-col :span="12">
          <div>位置编码：{{ detail.locationNo }}</div>
          <div>入库时间：{{ detail.inTime }}</div>
          <div>库位名称：{{ detail.locationName }}</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const detail = ref({
  // 采购信息
  purchaseNo: '1',
  materialNo: 'sf222355422',
  materialName: '规划局',	
  materialQty: '2222',
  batchNo: 'CS24443433122',
  purchaseDate: '2021-09-05',
  // 质检信息
  qcNo: '',
  qcName: '',
  qcPerson: '',
  qcQty: '',
  qcTime: '',
  // 仓库信息
  warehouseNo: '',
  currentQty: '',
  areaName: '',
  locationNo: '',
  inTime: '',
  locationName: ''
})

// // 反填方法
// const fetchDetail = async () => {
//   // 假设后端接口返回的数据结构与上面 detail 对应
//   // 你可以根据实际接口调整字段
//   const res = await axios.get('/api/material/purchase/detail', { params: { id: 你的单据ID } })
//   Object.assign(detail.value, res.data)
// }

// onMounted(() => {
//   fetchDetail()
// })
</script>